0

Необходимо сделать список по центру хидера и приклеенному к его низу...

Вот что у меня есть и не работает как надо... html

<header>
<div id="nav_top">
    <ul >
    <li><a href="#">Раздел1</a></li>
    <li><a href="#">Раздел2</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
        </ul>
    </li>
    <li><a href="#">Раздел2</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
            <li><a href="#">Подраздел4</a></li>
            <li><a href="#">Подраздел5</a></li>
            <li><a href="#">Подраздел6</a></li>
            <li><a href="#">Подраздел7</a></li>
        </ul>
    </li>       
</ul>  

</div>
</header>

CSS

header
{
height:250px;
background:#FE0000;
}

#nav_top ul
{
    text-align: center;
    background:#FCff00;
}
#nav_top ul li{
    display: inline-block;
}
    #nav_top  li  ul {
        position:absolute;
        top:42px;
        padding-top:0px;
        padding-left:0px;
        display:none;   
    }
    #nav_top  li:hover  ul {
        display:block;
    }
    #nav_top  li ul li {
        display:block;
        background:#FCff00;
    }


#nav_top {
    display: block;
    height:25px;
    width:500px;
    position: fixed;
    top:225px;
   margin: 0 auto 50px;
}

Необдходимо сделать мееню по центру хидера и приклееному к его низу

2

2 ответа 2

2

*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
min-width:1000px;
}
header{
position: relative;
height:250px;
background: rgb(215, 250, 222);
}
#nav_top{
position: absolute;
bottom: 0;
right: 50%;
margin-right: -142px;
background: rgba(53, 207, 213, 0.43);
list-style: none;
}
#nav_top li{
float: left;

}
#nav_top li	a{
display: block;
padding: 10px 20px;
color: rgb(128, 128, 128);
}
#nav_top  li  ul {
display:none; 
position: absolute;
top: 38px;
width: 120px;	
list-style: none;
}
#nav_top  li:hover  ul {
display: block;
}
#nav_top  li ul li {
background: rgba(53, 207, 213, 0.43);
color: rgb(128, 128, 128);
}
#nav_top  li ul li:hover{
opacity: 0.9;
}
<header>
	<ul id="nav_top">
		<li><a href="#">Раздел1</a></li>
		<li><a href="#">Раздел2</a>
			<ul>
				<li><a href="#">Подраздел1</a></li>
				<li><a href="#">Подраздел2</a></li>
				<li><a href="#">Подраздел3</a></li>
			</ul>
		</li>
		<li><a href="#">Раздел2</a>
			<ul>
				<li><a href="#">Подраздел1</a></li>
				<li><a href="#">Подраздел2</a></li>
				<li><a href="#">Подраздел3</a></li>
				<li><a href="#">Подраздел4</a></li>
				<li><a href="#">Подраздел5</a></li>
				<li><a href="#">Подраздел6</a></li>
				<li><a href="#">Подраздел7</a></li>
			</ul>
		</li>       
	</ul>  
</header>

Если согласно Вашему ТЗ, и не нужно его фиксировать при скролле, то думаю так.

1

header,main,menu,aside,article,div,section,div,
h1,h2,h3,h4,h5,h6,ul,li,a,ol,span,p,img{
 display:block;
}
*{
 margin:0; padding:0;
}
html,body{
 height:100%;
 min-width:1000px;
}
header{
 width:100%;
 min-width:1000px;
 height:150px;
 background:#f9f9f9;
 margin:0 auto;
 margin-bottom:3px;
}
menu{
 width:100%;
 min-width:1000px;
 height:40px;
 line-height:40px;
 background:#f9f9f9;
}
menu ul{
 width:600px;
 max-width:600px;
 margin:0 auto;
 position:relative;
 top:-10px;
 
}
menu ul li{
 display:inline-block;
 padding:10px 20px;
}
menu ul li a{
 text-decoration:none;
 font-family:sans-serif;
}
menu ul ul{
 position:absolute;
 top:50px;
 left:50%;
 background:lightblue;
 width:120px;
 display:none;
}
menu ul li:hover ul{
 display:block;
}
menu ul ul li{
 display:block !important;
 border-bottom:1px solid #fff;
 height:30px;
 line-height:20px; 
}
menu ul ul li:hover{
 background:grey;
}
menu ul ul li:hover a{
 color:#fff;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<header class="header"> 
	</header>
	<menu class="menu"> 
	           <ul>
	           	<li><a href="">Пункт 1</a></li>
	           	<li><a href="">Пункт 2</a></li>
	           	<li><a href="">Пункт 3</a></li>
	           	<li><a href="">Пункт 4</a>
				      <ul>
				      	<li><a href="">Пункт 4-1</a></li>
				      	<li><a href="">Пункт 4-2</a></li>
				      	<li><a href="">Пункт 4-3</a></li>
				      </ul>
				</li>
	           	<li><a href="">Пункт 5</a></li>
	           </ul>
	</menu>
</body>
</html>

так или нет ?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.