html5 выравнивание горизонтального подменю

У меня вопрос о правильном выравнивании горизонтального подменю на веб-странице. Я встал до такой степени, что у меня заголовок с логотипом слева и меню справа. Я получил свое подменю, чтобы показать, что я нахожусь в главном меню. Однако мне трудно получить подменю, чтобы выровнять правую сторону страницы, и он продолжает уходить со страницы. Итак, я знаю, что мне нужно коснуться «header nav li: hover ul», и я изменил на относительную и временную проблему с выходом страницы. Но это создало еще одну проблему, когда основное меню покидает исходное положение. Может ли кто-нибудь помочь мне с этим css и рассказать мне, как исправить эту проблему?html5 выравнивание горизонтального подменю

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
a {text-decoration:none;color:#000;} 

/* header */ 
header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;} 
header #logo {margin-left:10px;float:left;font-size:36px;} 

/* menu */ 
header nav {margin:0;padding:0;float:right;margin-top:40px;display:block;} 
header nav ul {list-style:none;} 
header nav li {float:left;padding:0 8px;display:inline-block;} 
header nav li a {display:inline-block;text-decoration:none;font-weight:700;} 
header nav li a:hover {color:#09F;} 
header nav li ul{display:none;} 

/* submenu */ 
header nav li:hover ul{display:block;position:absolute;} 
header nav li:hover ul li {display:inline-block;float:left} 
header nav li:hover ul li a{font-weight:400;} 
header nav li ul li a{width:auto;} 
</style> 
</head> 

<body> 
<header> 
<div id="logo"> 
<p>LOGO</p> 
</div> <!-- end logo --> 
<nav> 
<ul> 
<li><a href="#">Menu 1</a> 
<ul> 
<li><a href="#">SubMenu 1</a></li> 
<li><a href="#">SubMenu 2</a></li> 
<li><a href="#">SubMenu 3</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 2</a> 
<ul> 
<li><a href="#">SubMenu 1</a></li> 
<li><a href="#">SubMenu 2</a></li> 
<li><a href="#">SubMenu 3</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 3</a> 
<ul> 
<li><a href="#">SubMenu 1</a></li> 
<li><a href="#">SubMenu 2</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 4</a> 
<ul> 
<li><a href="#">SubMenu 1</a></li> 
<li><a href="#">SubMenu 2</a></li> 
<li><a href="#">SubMenu 3</a></li> 
<li><a href="#">SubMenu 4</a></li> 
<li><a href="#">SubMenu 5</a></li> 
</ul> 
</li> 
</ul> <!-- end main ul --> 
</nav> <!-- end nav --> 
</header> 
</body> 
</html>

источник

2016-02-15 TIMAE

Я старался понять, чего вы хотите. Хотите, чтобы вы захотели архивировать? главное меню справа и подменю под основным меню? Надеюсь, что это вам поможет.

a {text-decoration:none;color:#000;} 
 

 
/* header */ 
 
header {width:980px;height:100px;margin:0 auto;margin-top:20px;background-color:Ff5f5f5;border-style:solid;} 
 
header #logo {margin-left:10px;float:left;font-size:36px;} 
 

 
/* menu */ 
 
header > nav {margin:0;padding:0;float:right;margin-top:40px;display:block;} 
 
header > nav > ul {list-style:none; padding-left: 0px;} 
 
header > nav > ul > li {float: left; width: 100px;text-align:right;} 
 

 
header > nav > ul > li > ul {display: none;list-style:none;padding-left: 0px; background-color: white; border: 1px solid black;} 
 
header > nav > ul > li > ul > li {display: inline-block;} 
 
header > nav > ul > li:hover > ul {display: block;list-style:none;white-space: nowrap; float: right;}

<header> 
 
<div id="logo"> 
 
<p>LOGO</p> 
 
</div> <!-- end logo --> 
 
<nav> 
 
<ul> 
 
<li><a href="#">Menu 1</a> 
 
<ul> 
 
<li><a href="#">SubMenu 1</a></li> 
 
<li><a href="#">SubMenu 2</a></li> 
 
<li><a href="#">SubMenu 3</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="#">Menu 2</a> 
 
<ul> 
 
<li><a href="#">SubMenu 1</a></li> 
 
<li><a href="#">SubMenu 2</a></li> 
 
<li><a href="#">SubMenu 3</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="#">Menu 3</a> 
 
<ul> 
 
<li><a href="#">SubMenu 1</a></li> 
 
<li><a href="#">SubMenu 2</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="#">Menu 4</a> 
 
<ul> 
 
<li><a href="#">SubMenu 1</a></li> 
 
<li><a href="#">SubMenu 2</a></li> 
 
<li><a href="#">SubMenu 3</a></li> 
 
<li><a href="#">SubMenu 4</a></li> 
 
<li><a href="#">SubMenu 5</a></li> 
 
</ul> 
 
</li> 
 
</ul> <!-- end main ul --> 
 
</nav> <!-- end nav --> 
 
</header>

источник

2016-02-15 07:11:54

им пытаются получить подменю быть горизонтальной. что-то вроде этого http://noupe.com/img/m10.gif, но в поле (заголовок) – TIMAE

Я не вижу изображение. Кстати, я изменил ответ. Это то, что вы хотите? –

ДА !! Спасибо огромное! – TIMAE

html5 выравнивание горизонтального подменю

ответ

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