在div中设置菜单样式
[英]styling a menu inside a div
问题描述
How can I access the ul and the li menu inside the div in CSS? 
如何在CSS的div中访问ul和li菜单？
<section id="main">
<div id="=cont">
<ul>
<li><a href="about.html"> Our Hitory </a>
<ul>
<li><a href="index.html"> The Foundation </a></li>
<li><a href="about.html"> Our Founders </a></li>
</ul>
</li>
<li>
<a href="about.html"> Our Company </a>
<ul>
<li><a href="index.html"> Our Business Practices </a></li>
<li><a href="about.html"> Our Brokers </a></li>
</ul>
</li>
</ul>
</div>
I've tried so many combinations in css but can't seem to be able to access that menu and style it. 我已经在CSS中尝试了很多组合，但似乎无法访问该菜单并设置其样式。
Thanks very much in advance! 首先十分感谢！
3 个解决方案
解决方案1
0 2018-04-29 14:52:55
this is an example of stylization Taken from: http://www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm 这是一个风格化的示例，摘自： http : //www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm
#footer ul { width: 1000px; text-align: center; } #footer li { display: inline; list-style-type: none; line-height: 44px; } #footer li a { color: #574621; text-decoration: none; margin: 0 10px; } #footer li a:visited { text-decoration: none } #footer li a:hover { text-decoration: underline }
?<!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" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> </style> </head> <body> <div id="footer"> <ul> <li><a href="#">Home</a>|</li> <li><a href="#">About our Hotel</a>|</li> <li><a href="#">Services</a>|</li> <li><a href="#">Photogallery</a>|</li> <li><a href="#">Testimonials</a>|</li> <li><a href="#">Locations</a>|</li> <li><a href="#">Contacts</a></li> </ul> </div> </body> </html>
解决方案2
0 2018-04-29 14:53:28
To speak to a Tag you can use in the CSS Sheet things like 要与标签对话，您可以在CSS Sheet中使用类似
Example 1: 范例1：
.id ul li {
your Css Code
}
/* in your case */
.cont {
position: ...;
}
/* Or for deeper Tags
* for example:
*/
.cont ul li a {
position: ...;
}
or but that is a bad Programmingstyle 还是那是一种不好的编程风格
Example 2: 范例2：
<li style="color:green"><a href="about.html"> Our Hitory </a>
there is also a third option to put css Code like in example 1 in a styletag in the head tag 还有第三个选项可以将css Code像示例1一样放在head标签的styletag中
Example 3: 范例3：
<head>
<style>
<!-- Code from Example 1 -->
</style>
</head>
Hope i can help you! 希望我能为您服务！
If you have any Questions left just ask. 如果您还有任何疑问，请提问。
Good Luck 祝好运
解决方案3
0 已采纳 2018-04-29 15:33:05
You have mistake in <div id="=cont"> change it to <div id="cont"> like this 您在<div id="=cont">出错，将其更改为<div id="cont">
#cont > ul{ list-style-type: none; } #cont > ul li{ padding: 10px; background: green; } #cont >ul li ul{ list-style-type: none; } #cont >ul li ul li{ padding: 10px; background: black; }
<section id="main"> <div id="cont"> <ul> <li><a href="about.html"> Our Hitory </a> <ul> <li><a href="index.html"> The Foundation </a></li> <li><a href="about.html"> Our Founders </a></li> </ul> </li> <li> <a href="about.html"> Our Company </a> <ul> <li><a href="index.html"> Our Business Practices </a></li> <li><a href="about.html"> Our Brokers </a></li> </ul> </li> </ul> </div> </section>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.