adrian/jean-cloud_website
1
0
Fork 0
Code Issues 1 Pull Requests 1 Releases Wiki Activity

overflow dropdown

Browse Source
This commit is contained in:
Elisa 2019-08-14 00:24:14 +02:00
parent 468548a8ec
commit 63ae7d5b64
2 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/main.css
View File

@ -19,20 +19,24 @@ body {
#nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding: 1.5em 0 31.5em 0;
z-index: 1;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
}
#nav #content {
width: 100%;
text-align: center;
padding: 1.5em 0 31.5em 0;
z-index: 1;
overflow-x: hidden;
}
ul, li {
list-style: none;
}
#nav > ul {
#nav #content > ul {
line-height: 0px;
position: relative;
display: inline-block;
@ -43,7 +47,7 @@ ul, li {
padding: 0 0.5em;
}
#nav > ul > li {
#nav #content > ul > li {
display: inline-block;
margin: -9px 0.5em 0 0.5em;
border-radius: 0.5em;
@ -52,17 +56,17 @@ ul, li {
position: relative;
}
#nav > ul::before {
#nav #content > ul::before {
left: 100%;
margin-left: 1px;
}
#nav > ul::after {
#nav #content > ul::after {
right: 100%;
margin-right: 1px;
}
#nav > ul::before, #nav > ul::after {
#nav #content > ul::before, #nav #content > ul::after {
content: '';
display: block;
width: 300%;

50
index.html
View File

@ -29,30 +29,32 @@
<!-- Nav -->
<!-- Todo – drop down list in css -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="#">And a submenu &hellip;</a>
<ul class="submenu">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
<div id="content">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="#">And a submenu &hellip;</a>
<ul class="submenu">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</div>
</nav>
</div>