Can anyone check my css code for dropdown menu, cant center the navigation menu?

I am new in coding css, tried suggested answers related to my problem but nothing works, any help will be appreciated; I want to place my menu at the center of the page while retaining the container background covered the entire available width... **here is my html code:** **and my css code:** #nav { Z-INDEX: 10; text-align:center; width: 100%; height: 20px; background: green; position: relative; padding:3px; font-size: 13px; list-style-type:none; list-style-position:outside; display:inline-block; font-weight: bold; line-height:1.5em; float: none; } #nav-wrapper { text-align: center; } #nav ul{ Z-INDEX: 10; text-align:center; position:relative; width: 1000px; display:inline-block; margin:0; padding:0; background: none; list-style-type:none; list-style-position:outside; line-height: 1.7em; font-size: 13px; float: none; } #nav li li{ Z-INDEX: 10; text-align:left; display:inline-block; margin:0; padding:0; font-weight: normal; list-style-position:outside; border-bottom: 0.1em solid white; color: #fff; } #nav a:link, #nav a:visited{ display:block; padding:0px 5px; color:#fff; text-decoration:none; background: green; } #nav ul a:hover{ Z-INDEX: 999; background: light-green; color: yellow; position: relative; } #nav li ul a:hover{ Z-INDEX: 999; background: green; color: yellow; position: relative; } #nav li li a:hover{ Z-INDEX: 999; background: light-green; color: yellow; font-weight: bold; position: relative; } #nav li a:hover{ background: light-green; color: yellow; Z-INDEX: 999; position: relative; } #nav a:active{ color: yellow; font-weight: bold; } #nav li{ float:left; position:relative; } #nav ul { position:absolute; width:14em; top:1.3em; display:none; } #nav li ul a{ width:14.65em; float:left; } #nav ul ul{ top:auto; } #nav li ul ul { left:14.65em; margin:0px 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }
Post it in a jsfiddle.

以上就是Can anyone check my css code for dropdown menu, cant center the navigation menu?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏