I'm making a web page for restaurant. Design says, that I need a little line between page selectors. Have already tried something, but thing worked.
It's HTML5 and CSS3.
* {
margin: 0em;
padding: 0em;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
background: url(https://images.unsplash.com/photo-1526234362653-3b75a0c07438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80) black no-repeat center center fixed;
background-size: cover;
}
h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 5% 0 13%;
}
ul {
list-style-type: none;
padding: 10px 20px;
background: black;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.95);
border-radius: 10px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
a:hover {
line-height: 0 !important;
transform: scale(1.5) !important;
transition: all 1s ease !important;
color: wheat;
}
.menu {
font-size: 32px;
width: 75%;
margin: auto;
max-width: 960px;
}
.left {
float: left;
text-align: right;
border-right: solid white;
padding-right: 25px;
}
.right {
float: right;
text-align: left;
border-left: solid white;
padding-left: 25px;
}
a {
list-style-position: inside;
border: 1px solid white;
}
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
</body>
I hope everything is not so bad :D
Really need this help!
And this is what i would like to have:
https://imgur.com/zxUhiSu/
Added lines (<hr>) between your menu selectors
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
For the CSS I suggest you don't use !important
A sample jsfiddle
Related
I'm trying to replicate this dropdown list that is on this website (1st image). I've tried using a regular dropdown menu but it comes out very small and it is not centered on the page. How can I create multiple dropdowns in the center of the right side of my split screen? Any help will be greatly appreciated!
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
</ul>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Select Your State
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">California</a></li>
<li><a class="dropdown-item" href="#">Illinois</a></li>
<li><a class="dropdown-item" href="#">Michigan</a></li>
<li><a class="dropdown-item" href="#">Ohio</a></li>
</ul>
</ul>
</div>
</div>
</body>
HTML has an <option> tag that is standardized selection inputs.
body {
margin:0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
select {
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<select id="state">
<option disabled selected>Select Your State</option>
<option value="california">California</option>
<option value="illinois">Illinois</option>
<option value="michigan">Michigan</option>
<option value="ohio">Ohio</option>
</select>
</div>
</body>
And to get the selected value, check the value property of the <select> element, e.g.: document.getElementById("state").value;
Stylize your <select> element to specify width, margin, padding, etc, e.g.: select { width: 100%; }
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
I have a HTML and CSS menu and I wanna show the special icon for each item when users hover on each item. I will show you my menu and codes...
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
}
<body>
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
</body>
this is my html and css codes
Because you are using a background image, you can adjust it's position using background-position. https://developer.mozilla.org/en-US/docs/Web/CSS/background-position.
You can adjust padding-left on .nav a to add space from the left edge and the nav text.
.nav{
background-color: #4f9b30;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 25px 14px 30px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
.nav a:hover {
background-color: #ff5c00;
color: black;
}
.home:hover{
background-image: url(https://ittest.ir/wp-content/uploads/2021/09/home-1.png);
background-repeat: no-repeat;
background-position: 4% 44%;
}
<div class="nav">
<a class="home" href="#">Home</a>
<a class="ran" href="#">why iran</a>
<a class="blog" href="#">blog</a>
<a class="services" href="#">About</a>
<a class="news"href="#">News</a>
<a class="event" href="#">event</a>
<a class="invest" href="#">invest</a>
<a class="contact" href="#">Contact</a>
</div>
I am making a site with a navbar, but when I resize the page, sometimes one link goes on an extra line like this: Navbar Example
How can I fix this? Here is my code:
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
Any help would be much appreciated!
Thanks,
Jasper
The only way you can avoid the nav bar word wrapping is by setting a minimum width on the nav bar, or add a media query to change it when the screen is too small.
Using the min-width CSS attribute.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<title>Navbar Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
</style>
</head>
<body>
<div class="sticky">
<ul style="min-width:884px">
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
</body>
</html>
That is a padding issue.
So, there'll be 2 solutions.
use #media to let the menu contains breadcrumb when the browser width is small.
if you're going to force display the navigation items by line breaking, then use flex
Just add 2 lines to your ul style
ul {
...
display: flex;
flex-flow: row wrap;
}
So, the final result will be
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
I am getting a problem when hovering on a link. the unordered list .shownav is not displaying. I am not sure if have declared the correct selector in my CSS. please help.
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
</li>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</ul>
</div>
Can anyone tells me whats wrong with my CSS? any help will be appreciated.
This has been solved. thanks for all your help. I very much appreciate it.
i have solved the problem on the issue of the ul not displaying by just rearranging the html itself. i simply just put the unordered list .shownav inside the anchor tag. i guess i have to go back to basics and understand the css selectors reference in w3school.
here is how it looks.
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class ="promainlink" href=""> Waduhek <i class= "glyphicon glyphicon-triangle-
bottom"></i>
<ul class="shownav">
<li><a class = "navlinks" href = "">View my Profile</a></li>
<li><a class = "navlinks" href = "">Account Settings</a></li>
<li><a class = "navlinks" href = "">Sign Out</a></li>
</ul>
</a>
</li>
</ul>
</div>
.shownav{
display:none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background:#1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index:99999;
}
.promainlink:hover + .shownav{display:block;}
You should try this
.mainul > li:hover + ul.shownav { display:block; }
You should learn about CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover + .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
I am designing a nav bar, which needs to be closed. This is simple html and css. I am attaching the design.
This is design it should look like :-
This is my current design :-
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="body">
<div class="header">
<h1>Home Page</h1>
<div class="navbar">
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Remove from "a. nav" margin style:
margin-left: 15px;
margin-right: 2px;
here is your new navbar class
.navbar {
height: 28px;
padding-top: 7px;
margin-top: 54px;
border: 1px solid #F00;
}
and example: https://jsfiddle.net/sqhaqcoo/1/
to reduce button width change padding: 8px 50px; to padding: 8px 40px;
I would add a fixed width:750px to the .navbar and margin:0 auto, then reduce the margin-left and remove the margin-right for the a.nav like here:
body{
background-color: #dddddd;
margin: 0;
padding: 0;
}
h1{
color:#7ba1cc;
font-size: 20px;
margin: 0;
padding: 0;
}
table{margin: 0 auto;
margin-top: 20px;
width: 70%;
}
table, th, td {
border: 1px solid black;
}
.black{
border-collapse: collapse;
}
.body{
width: 800px;
height: 1000px;
margin: 0 auto;
background-color: #cccccc;
}
.header{
height:115px;
background-color: #1d8bb3;
}
.navbar{
height:25px;
padding-top:8px;
margin-top:57px;
border: 1px solid red;
width: 750px;
margin: 0 auto;
}
ul.nav, li.nav {
display:inline-block;
float: inside;
margin: 0px;
padding: 0px;
}
a.nav {
background-color: #E2DDDD;
padding: 8px 50px 8px 50px;
margin-left: 5px;
text-decoration: none;
text-align:center;
}
a:hover.nav {
background-color: #CCC8C8;
}
<html>
<head>
<title> Homework 2</title>
<meta charset= "UTF-8">
</head>
<body>
<div class="body">
<div class="header">
<h1> Home Page </h1>
<div class="navbar" >
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>