Пытаться внедрить раскрывающееся меню CSS

Я пытаюсь реализовать раскрывающееся меню CSS, но всякий раз, когда я это делаю, теги и <p> обертывают выпадающие меню.Пытаться внедрить раскрывающееся меню CSS

Может кто-нибудь предложить решение? Я только сейчас изучаю CSS и буду благодарен за любые материалы.

Благодаря

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="css.css"/> 
</head> 

<body> 
<div id= "container"> 

    <img src="images/title.jpg"/> 


<div id="navigation"> 
<ul class="navbar"> 
<li> 
    <a href="#">Home</a> 
</li> 
<li> 
    <a href="#">HTML5</a> 
    <ul> 
     <li> 
      <a href="#">Tutorial 1</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 2</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 3</a> 
     </li> 
    </ul> 
</li> 
<li> 
    <a href="#">CSS3</a> 
    <ul> 
     <li> 
      <a href="#">Tutorial 1</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 2</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 3</a> 
     </li> 
    </ul> 
</li> 
<li> 
    <a href="#">Links</a> 
</li> 
<li> 
    <a href="#">Contact</a> 
    </li> 
</ul> 
</div> 
<div id="content"> 
<h2>Home Page</h2> 
<p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.</p> 
</div> 
    <div id="footer"> 
    </div> 


</div> 



</body> 
</html>

и CSS является:

@charset "utf-8"; 
/* CSS Document */ 
#container{ 
    width:800px; 
    background-color:#00FF00; 
    border:1px solid black; 
    height:1000px; 
    z-index:-9; 
    margin:auto; 
} 

#logo{ 

    background-color:#FF0033; 
    border:#000 1px; 
    width:800px; 
    height:200px; 
    overflow:hidden; 

} 

#navigation{ 

    background-color:#FFF; 
    border:#000 1px; 
    width:800px; 
    height:30px; 

} 

#content{ 

    background-color:#6F3; 
    border:#000 1px; 
    width:780px; 
    height:400px; 
    margin:10px; 



} 

#footer{ 

    background-color:#FF0; 
    border:#000 1px; 
    width:800px; 
    height:100px; 
} 

.navbar { 
/*border-right: 1px solid #54879D;*/ 
height: 40px; 
margin: 0 0 0 0; 
padding: 0; 

} 
.navbar li { 
background-color: #366B82; 
float: left; 
font: bold 12px/1.2em Arial,Verdana,Helvetica; 
height: auto; 
list-style: none outside none; 
margin: 20 0; 
padding: 0; 
text-align: center; 
    width: 160px; 
} 
.navbar a { 
/* border-left: 1px solid #54879D;*/ 
border-right: 1px solid #1F5065; 
color: #FFFFFF; 
display: block; 
padding: 10px 10px; 
    text-decoration: none; 
} 
.navbar li:hover, a:hover { 
background-color: #54879D; 
} 
.navbar li ul { 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 

} 
.navbar li:hover ul { 
display: block; 


} 
.navbar li ul li { 
background-color: #54879D; 

} 
.navbar li ul li a { 
border-color: #74A3B7 #1F5065 #1F5065; 
border-left: 1px solid #1F5065; 
border-right: 1px solid #1F5065; 
border-style: solid; 
border-width: 1px; 
} 
.navbar li ul li a:hover { 
background-color: #366B82; 
}

источник

2013-10-10 LeDoc

показать некоторый код дружище –

Пожалуйста показать код. Скорее всего, вы не закрыли свои теги. –

обновление этих классов:

working DEMO

.navbar li ul li { 
background-color: #54879D; 
float:none; /*added*/ 
} 

.navbar li ul { 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 
position:absolute; /*added*/ 
}

источник

2013-10-10 13:50:20

Спасибо, что отлично работает. Можете ли вы объяснить, что делают эти две строки, чтобы я полностью понял? – LeDoc

@ user2784840: вам нужно установить внутреннюю позицию 'ul' в' absolute', чтобы предотвратить нажатие содержимого и установить 'float' в' none' для элементов списка друг под другом. –

Пытаться внедрить раскрывающееся меню CSS

ответ

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