Бары на боковой панели навигации при наведении курсора на

Я не знаю, как избавиться от баров сбоку, когда я нависаю над навигационной панелью. Может ли кто-нибудь помочь? Я не хочу менять внешний вид или положение панели навигации. Я хочу только сделать части, на которые не влияет зависание, зависящее от него.Бары на боковой панели навигации при наведении курсора на

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Simple Site</title> 
</head> 

<body> 

<div id="container"> 
<div id="body"> 
<center> 
    <ul class="navbar"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="biography.html">Biography</a></li> 
    </ul> 
    </center> 
</div>  
</div> 
</body> 
</html>

CSS:

@charset "utf-8"; 


#container { 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
    background-color:#666666; 
} 

#body { 
    background-color:#666666; 
    width:960px; 
    height:500px; 
    border:2px solid #FFFFFF; 
    margin-top:50px auto; 
} 

.navbar {margin:0px; 
    background-color:#66FF33; 
    text-align:center; 
    list-style:none; 
    border-bottom:none; 
    padding-left:0px  
} 

ul.navbar li { 
    width:19%; 
    display:inline-block; 
} 

ul.navbar a { 

    display:block; 
    width:100%; 
    margin:0px; 
    padding:10px 0px; 
    text-decoration:none; 
} 

ul.navbar a:hover { 
    background-color:#33FFD7; 
} 

body { 
    background-color:#333333; 
}

источник

2013-07-11 Anonymous

Попробуйте удалить все пространство между вашими <li> элементами. Пространства создают дополнительное, ну, пространство между ссылками. Это добавляет к 100% ширине 5 элементов с шириной 20%.

<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>

Я надеюсь, что есть более удовлетворительный ответ, чем это, но если вы просто хотите быстро и легко, это будет работать.

JSFiddle

источник

2013-07-11 23:14:49 Enigmadan

Вы можете мне привести пример? –

Добавлен jsfiddle. Я сделал редактирование для вашего css. Я изменил 19% до 20% на 'li'. – Enigmadan

Бары на боковой панели навигации при наведении курсора на

ответ

Смежные вопросы