We Keep Coding

Pure CSS navbar :Hover on List not staying

I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:
#font-face{
font-family: Bebas;
src:url(BEBAS.TTF);
}
body{
margin:0 auto;
height:500px;
font-family: Bebas;
}
.header{
top:0;
position:absolute;
left:0;
right:0;
background:#ff6200;
height:50px;
width:100%;
color:white;
font-family: Bebas;
}
.header .call{
line-height:50px;
}
.call{
width:60%;
margin:0 auto;
}
.login{
float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
margin-left:10px;
}
.number{
margin-left:10px;
}
.navbar{
margin-top:50px;
right:0;
left:0;
position:relative;
height:130px;
width:100%;
background:#F7F7F7;
border-radius:0px;
padding:0px;
}
.inside-navbar{
line-height:130px;
width:60%;
margin:0 auto;
font-size:40px;
}
.logo{
color:#FF6200;
}
#navsman{
font-size:16px;
float:right;
display:inline-block;
min-width:300px;
position:absolute;
padding-right: 20%;
}
#navsman li{
display:inline;
position:relative;
padding-left:15px;
line-height:1.4;
}
#navsman li ul{
position:absolute;
display:none;
}
#navsman li:hover > ul.firstmenu{
display:block !important;
margin-top: -50px;
}
#navsman li ul li{
position:relative;
padding-left:15px;
}
#navsman ul.secondmenu{
margin-left: 40px;
padding-top:15px;
padding-top: 30px;
z-index: 2;
width: 120px;
display:none;
}
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
display:block !important;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
<div class="header">
<div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
<span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span>
</div>
</div>
<div class="navbar">
<div class="inside-navbar">
<span>YOUR<span class="logo">LOGO</span></span>
<ul id="navsman">
<li>Title1</li>
<li class="title2">Title2
<ul class="firstmenu">
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3
<ul class="secondmenu">
<li class="secondli-first">Sub link 1</li>
<li class="secondli-second">Sub link 1</li>
</ul>
</li>
</ul>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
<li>Title6</li>
<li>Title7</li>
</div>
</ul>
</div>
</div><!--Navbar end-->
</div>

Replace:
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
With:
#navsman > li:hover > ul li {
left: auto;
padding-top: 5px ;
min-width: 100%;
height: 10px;
margin-top:-15px;
padding-left: 10px;
}

Close the gap mentioned by #James Montagne
navsman li ul{
position:absolute;
display:none;
top:70px; <-- new line of code
}

Highlight menu item and its submenu item

I have this css code and I need to do this:
I have a dropdown menu with 5 items.
Item1 (root)
-Item2
-Item3
-Item4
-Item5
When I'm inside the page for example "Item4" I need that the "Item4" menu item and the "Item1 (root)" menu item are highlighted with a same color.
Thanks so much.
.menu-container{
}
.de-menu {
color:#333;
font-family:'Ovo';
font-weight:400;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
float:right;
}
.de-menu {
display:inline-block;
padding:0px 0px 0px 0px;
margin:10px 0px 0px 0px;
height:93px;
}
.de-menu li {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
.de-menu a {
display:block;
padding:35px 14px 34px 14px;
line-height:30px;
text-decoration:none;
color:#fff;
}
.de-menu .current-menu-item a{
color:#e8c694;
}
.de-menu .current-menu-parent a{
color:#e8c694;
}
/*.de-menu .active a {
color:#red;
}*/
.de-menu li ul{
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
margin-left:25px;
padding:0;
}
.de-menu li li {
font-size:12px;
letter-spacing:normal;
text-transform:uppercase;
}
.de-menu li li a{
padding:5px 15px 5px 15px;
background:#64483E;
border-top:none;
}
.de-menu a:hover {
background:#64483E;
}
.de-menu li li a:hover{
border-top:none;
}
.de-menu li li a:hover {
background:url(../images/dotblack30.png) #513D32;
}
.de-menu li ul {
width:170px;
height:auto;
position:absolute;
top:100%;
left:-25px;
z-index:10;
display:none;
text-align:left;
}
.de-menu li li {
display:block;
float:none;
}
.de-menu li li ul{
margin-left:0;
}
.de-menu li:hover > ul {
display:block;
}
.de-menu li ul ul {
left:100%;
top:0px;
}
.de-menu li:hover a {
background:#64483E;
}
.de-menu select {padding:10px; height:36px; font-size:14px; border:none; background:#513D32; color:#fff;}
.de-menu select option{padding:10px;}

(this style is already in stylesheet around line 275, so just need to add background color)
.de-menu .current-menu-parent a {
background: #64483E;
}
(this would be to add to style sheet):
.de-menu .current-menu-parent .sub-menu .current-menu-item a {
background: url("../images/dotblack30.png") #513D32;
}

In my CSS file, "active" class has highlighting css values like
"background-color: #FFFFFF"
I'm using these in each page:
<script>
document.getElementById("PAGE_MENU_NAME_1").className = "active";
</script>
OR
<script>
document.getElementById("PAGE_MENU_NAME_2").className = "active";
</script>
OR
<script>
document.getElementById("PAGE_MENU_NAME_3").className = "active";
</script>
Use one of above for which page you are viewing.
This is my master page like "Menu.php"
<ul id="menu">
<li id="PAGE_MENU_NAME_1">PAGEMENUNAME1"</li>
<li id="PAGE_MENU_NAME_1">PAGEMENUNAME2"</li>
<li id="PAGE_MENU_NAME_3">PAGEMENUNAME3"</li>
</ul>
I hope you get what I said.

How could I remove the text-decoration when is active. I have the following code but the link is underlined

Html code for my question.
This is a tab list based on a javascript.
When i click one of the tabs the link still remains underlined, even if i coded text-decoration:none.
<ul class="tabet">
<li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year #</p>
<strong>$399.99</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years #</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years #</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>
</li>
</ul>
css code for my question.
The css begins on from styling of the list until the links.
.tabet
{
float:left;
margin-top:5%;
margin-left:12%;
position:relative;
width:80%;
}
.tabet li
{
display:inline;
margin: 2% 0 2% 5%;
float:left;
position:relative;
text-align:center;
}
.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
}
.tabet li a:hover
{
text-decoration:none;
text-align:center;
}
.tabet li a:active
{
color:#000;
text-decoration:none;
background-color:#CF0;
}
.vitetdesign
{
border:1px solid #178b1d;
padding:2% 5%;
background-color:#ececec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:120px;
}
.vitetdesign:hover
{
border:1px solid #454545;
padding:2% 5%;
background-color:#cecece;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.vitetdesign:active
{
background-color:#cecece;
border:1px solid #454545;
text-decoration:none!important;
}

You must set text-decoration: none in class tabet li a
CSS
.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
text-decoration: none;
}
DEMO HERE

Use focus Fiddle
.tabet li a:focus {
color:#000;
text-decoration:none;
background-color:#CF0;
}
.tabet {
float:left;
margin-top:5%;
margin-left:12%;
position:relative;
width:80%;
}
.tabet li {
display:inline;
margin: 2% 0 2% 5%;
float:left;
position:relative;
text-align:center;
}
.tabet li a {
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
}
.tabet li a:hover {
text-decoration:none;
text-align:center;
}
.tabet li a:active {
color:#000;
text-decoration:none;
background-color:#CF0;
}
.tabet li a:focus {
color:#000;
text-decoration:none;
background-color:#CF0;
}
.vitetdesign {
border:1px solid #178b1d;
padding:2% 5%;
background-color:#ececec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:120px;
}
.vitetdesign:hover {
border:1px solid #454545;
padding:2% 5%;
background-color:#cecece;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.vitetdesign:active {
background-color:#cecece;
border:1px solid #454545;
text-decoration:
}
<ul class="tabet">
<li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year #</p>
<strong>$399.99</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years #</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years #</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>
</li>
</ul>

a:focus, a:active, a:visited {
text-decoration : none;
}

If u dont need underline at all then put css like this
.tabet li a
{
text-decoration:none;
}
.tabet li a:hover
{
text-decoration:none;
}
you can add other styles as u wish such as color , font-family etc

CSS isn't formatting ActionLinks

I have a shared layout with ActionLinks for getting between pages. I have a project that I worked on before just for fun and was trying to recreate the formatting effect that I used on my navigation menu in that project because I really like the way it looked and it was a responsive menu. For some reason I can't get the links to format with the CSS.
Here is the shared layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onboarding Practice</title>
#Styles.Render("~/Content/Site.css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/responsivemobilemenu.js")" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box-effect">
<div class="web-header">
PrimeRCM Onboarding App
</div>
<div class="rmm">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Patients", "Patients", "Patients")</li>
<li>#Html.ActionLink("Practices", "Practices", "Practices")</li>
</ul>
</div>
<div id="body-content">
#RenderSection("featured", required: false)
<section class="content-wrapper clear-fix">
#RenderBody()
</section>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</div>
</body>
</html>
Navigation Menu CSS for ActionLinks
/********Navigation Menu********/
/*#region*/
.rmm {
display:block;
position:relative;
width:100%;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family:Arial;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
.rmm .rmm-main-list li {
display:inline;
padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/* GRAPHITE STYLE */
.rmm.graphite .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
text-shadow:1px 1px 1px #333333;
background-color:#444444;
border-left:1px solid #555555;
background-image:url('../Images/BorderImages/graphite-menu-bg.png');
background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
background-image:url('../Images/BorderImages/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
width:95%;
background-color:#555555;
min-height:36px;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
display:block;
height:36px;
color:white;
text-align:left;
position:relative;
background-image:url('../Images/BorderImages/graphite-menu-bg.png');
background-repeat:repeat-x;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
color:white;
text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
display:block;
position:absolute;
right:15px;
top:8px;
}
.rmm.graphite .rmm-button span {
display:block;
margin-top:4px;
height:2px;
background:white;
width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
display:block;
width:100%;
background-color:#555555;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #333333;
border-top:1px solid #777777;
text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
background-color:#444444;
border-bottom:1px solid #444444;
border-top:1px solid #444444;
}
/* MINIMAL STYLE */
.rmm.minimal a {
color:#333333;
}
.rmm.minimal a:hover {
opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm.minimal .rmm-toggled {
width:95%;
min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
display:block;
height:36px;
color:#333333;
text-align:left;
position:relative;
}
.rmm.minimal .rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#333333;
}
.rmm.minimal .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm.minimal .rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#333333;
width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #dedede;
color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top:1px solid #dedede;
}
/*#endregion*/
This is the javascript file that goes with the navigation menu for the responsive design:
function responsiveMobileMenu() {
$('.rmm').each(function() {
$(this).children('ul').addClass('rmm-main-list'); // mark main menu list
var $style = $(this).attr('data-menu-style'); // get menu style
if ( typeof $style == 'undefined' || $style == false )
{
$(this).addClass('graphite'); // set graphite style if style is not defined
}
else {
$(this).addClass($style);
}
/* width of menu list (non-toggled) */
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
// if modern browser
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
/* toggle menu on resize */
$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
/* slide down mobile menu on click */
$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});

Ok so I solved my own problem and it was all because I was trying to reference the wrong scripts. My knockout script is version 2.2.0 and my jquery script is 1.8.2 instead of what I thought they were. I just didn't pay attention to the versions when I created the new project.

Dropdown menu problems, DIV and or CSS issues

Alright, I've periodically looked and messed around with this for around 6 weeks and so far have been unable to figure out how to solve this thing. Though I assume it's something small and relatively simple to people with more experience.
Background:
I am starting with a template that had a good js slideshow that I liked and started customizing it. When i got to a certain point I realized I wanted to add a drop-down menu. When I first added the ul sub-menu for the drop-down nothing appeared to happen. After messing with it for some time i created a test page where I only added the drop-down menu to see if the js was effecting it in any way and it worked as expected. I then added only the js in to see if my 0 knowledge of js was effecting it and it worked (no alignment info).
At this point i went back to the original code and it stopped working. so I went online and got some example code to put in that I knew worked and that too didn't work. At one point I started messing with the div tags in the html and was able to get some resemblance of what I was looking for though the content started shifting down sometimes on rollover; other times it would drop the content 100% of the time. I moved to playing with z-index's and no matter what I did that didn't seem to make a difference either.
The question:
What the heck am I not seeing here? All I'm looking for is a drop-down that goes over top of the js slideshow without pushing it down. I'm pretty sure this issue revolves around the fact that there are so many div's to make this layout and they're conflicting somehow. Any help someone could give would be absolutely amazing because I'm going crazy.
Here is the index page with issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mitchell Faherty</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/tms-0.3.js"></script>
<script src="js/tms_presets.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="main">
<h1> Mitchell Faherty <em>Wedding photo / Videos</em> </h1>
</div>
<div class="menu-row">
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<!--
<ul>
<li>About1</li>
<li>About2</li>
<li>About3</li>
</ul>
-->
<li>Photos</li>
<li>Videos</li>
<li>Links</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li> <img src="images/front-slider/slider-img1.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img2.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img3.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img4.jpg" alt=""> </li>
</ul>
</div>
</div>
</div>
</header>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_3 suffix_3">
<ul class="list-services">
<li><a class="item-1" href=""></a></li>
<li><a class="item-2" href=""></a></li>
<li><a class="item-3" href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
$(window).load(function () {
$('.slider')._TMS({
duration: 1000,
easing: 'easeOutQuint',
preset: 'slideDown',
slideshow: 7000,
banners: false,
pauseOnHover: true,
pagination: true,
pagNums: false
});
});
</script>
</body>
</html>
And here is the CSS:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
/*********************************Global Properties**********************************/
html {
width:100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
min-width:984px;
background:#f8f8f8
}
.ic {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
#page3 {
min-width:1034px;
}
.main {
width:984px;
padding:0;
margin:0 auto;
font-size:14px;
line-height:25px;
}
a {
color:#f00058;
outline:none;
}
a:hover {
text-decoration:none;
}
.col-1, .col-2 {
float:left;
}
.wrapper {
width:100%;
overflow:hidden;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:8px;
}
.p2 {
margin-bottom:15px !important;
}
.p3 {
margin-bottom:30px !important;
}
.p4 {
margin-bottom:40px;
}
.p5 {
margin-bottom:50px;
}
.reg {
text-transform:uppercase;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.it {
font-style:italic;
}
.color-1 {
color:#f00058;
}
.color-2 {
color:#7c7c7c;
}
.img-border1 {
float:left;
padding:3px;
background:#fff;
border:1px solid #e5e5e5;
}
.img-border2 {
float:left;
padding:3px;
margin-right:15px;
background:#fff;
border:1px solid #e5e5e5;
}
/*********************************Boxes**********************************/
.indent {
padding:0 15px;
}
.indent-top {
padding-top:5px;
}
.indent-left {
padding-left:30px;
}
.indent-right {
padding-right:35px;
}
.indent-bot {
margin-bottom:20px;
}
.indent-bot2 {
margin-bottom:18px;
}
.indent-bot3 {
margin-bottom:45px;
}
.prev-indent-bot {
margin-bottom:10px;
}
.img-indent-bot {
margin-bottom:25px !important;
}
.margin-bot {
margin-bottom:35px;
}
.img-indent {
float:left;
margin:0 20px 0px 0;
}
.img-indent2 {
float:left;
margin:0 30px 0px 0;
}
.img-indent3 {
float:left;
margin:0 10px 0px 0;
}
.img-indent-r {
float:right;
margin:0 0px 0px 20px;
}
.buttons a:hover {
cursor:pointer;
}
.menu li a, .list-1 li a, .list-2 li a, .link, .button, h1 a {
text-decoration:none;
}
/*********************************header*************************************/
header {
width:100%;
background:#fff;
position:relative;
z-index:2;
}
h1 {
padding:36px 0 0 22px;
position:relative;
overflow:hidden;
margin-bottom:27px;
}
h1 a {
display:block;
width:230px;
height:77px;
text-indent:-9999em;
background:url(../images/wedding-logo.png) 0 0 no-repeat;
float:left;
margin-right:5px;
}
h1 em {
display:inline-block;
font-family: 'PT Sans', sans-serif;
font-size:14px;
font-weight:400;
line-height:2em;
color:#888;
text-transform:uppercase;
padding-top:31px;
}
/*********************************Menu**********************************/
.menu-row {
width:100%;
padding:1px 0 5px;
background:url(../images/menu-row-tail.png) center top repeat-x;
}
#page1 .menu-row {
margin-bottom:22px;
}
.menu {
width:100%;
background:url(../images/menu-spacer.gif) left top no-repeat;
overflow:hidden;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
display:inline-block;
height:60px;
overflow:hidden;
font-family: 'PT Sans', sans-serif;
font-size:17px;
font-weight:400;
line-height:59px;
padding:0 50px;
color:#fff;
text-transform:uppercase;
}
.menu li a.active, .menu > li > a:hover {
background:url(../images/menu-active-tail.gif) 0 0 repeat-x #f00058;
}
/*********************************Drop Down**********************************/
ul#nav {
margin: 0 0 0 200px;
}
ul.drop a {
display:block;
color: #fff;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555; color: #fff;
}
ul.drop {
position: relative;
z-index: 107;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 109;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
/*visibility: hidden;
position: absolute;
top: 100%;
left: 0; */
display:none;
z-index: 108;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
/*visibility: visible */
display: block;
}
/*********************************Slider**********************************/
.slider-wrapper {
width:745px;
height:540px;
padding:54px 0 0 150px;
background:url(../images/slider-bg.png) 0 0 no-repeat;
overflow:hidden;
}
.slider {
width:690px;
height:460px;
}
.items {
display:none;
}
.pagination {
position:absolute;
left:290px;
bottom:-62px;
z-index:99
}
.pagination li {
float:left;
padding-right:6px;
}
.pagination a {
display:block;
width:24px;
height:24px;
background:url(../images/slider-pagination.png) right top no-repeat;
cursor:pointer;
}
.pagination li.current a {
cursor:default;
}
.pagination li.current a, .pagination a:hover {
background-position:left top;
}
/*********************************Content*************************************/
#content {
width:100%;
padding:35px 0 53px;
background:#fff;
position:relative;
z-index:1;
}
h2 {
font-family: 'PT Sans', sans-serif;
font-size:37px;
font-weight:700;
line-height:1.2em;
color:#000;
margin-bottom:15px;
letter-spacing:-1px;
}
h3 {
font-family: 'PT Sans', sans-serif;
font-size:23px;
font-weight:700;
line-height:2em;
color:#000;
margin-bottom:7px;
}
h6 {
color:#f00058;
}
.tdate-1 {
display:block;
color:#7c7c7c;
font-size:14px;
line-height:20px;
}
.tdate-1 a {
color:#7c7c7c;
}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(../images/pic-4.gif) 0 bottom repeat-x;
}
.q1, .q2, .q3 {
width:100%;
position:relative;
}
.quote-marker1 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-1.png) 0 0 no-repeat;
position:absolute;
top:30px;
left:-1px;
z-index:2;
}
.quote-marker2 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-2.png) 0 0 no-repeat;
position:absolute;
top:30px;
right:0;
z-index:2;
}
.q1 .quote-bot {
padding-bottom:5px;
padding-left:10px;
background:url(../images/quote-bot.jpg) right bottom no-repeat;
position:relative;
z-index:1;
}
.q2 .quote-bot {
padding-bottom:5px;
padding-right:10px;
background:url(../images/quote-bot.jpg) left bottom no-repeat;
position:relative;
z-index:1;
}
.quote-top {
width:100%;
padding-top:5px;
background:url(../images/quote-top.jpg) right top no-repeat;
}
.quote {
width:100%;
overflow:hidden;
color:#7c7c7c;
background:url(../images/quote-tail.jpg) right top repeat-y;
}
.quote .padding {
padding:18px 25px 19px 30px;
}
.q3 {
background:url(../images/pic-3.png) 0 3px no-repeat;
color:#7c7c7c;
font-style:italic;
margin-bottom:17px;
}
.q3 .padding {
padding:0 0 0 35px;
}
/* -- gallery begin --*/
#gallery {
width:1034px;
height:870px;
margin:0 auto;
position:relative;
overflow:hidden;
}
#js {
position:relative;
width:940px;
margin:0 auto;
font-size:14px;
line-height:25px;
}
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
width: 410px;
height: 340px;
overflow: hidden;
}
div.content img {
position: relative;
z-index: 2;
}
div.content a, div.navigation a {
}
div.content a:focus, div.content a:hover, div.content a:active {
}
div.controls {
position:relative;
}
div.controls a {
padding: 0px;
}
div.ss-controls {
float: left;
display:none;
}
div.nav-controls {
width:100%;
height:27px;
position:absolute;
left:0;
bottom:56px;
}
div.nav-controls a.prev {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-prev.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
left:-47px;
z-index:99;
}
div.nav-controls a.next {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-next.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
right:-47px;
z-index:99;
}
div.slideshow-container {
position: relative;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
z-index:1;
width:900px;
margin-right:48px;
float:left;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
width: 900px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.caption {
width:100%;
height:100%;
}
div.slideshow span.image-wrapper {
display: block;
width: 900px;
height: 600px;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
div.slideshow a.advance-link {
display: block;
width: 900px;
height: 600px;
padding: 3px;
margin: 0;
font-size:0;
line-height:0;
text-decoration:none;
background:#fff;
border:1px solid #e5e5e5;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.download {
float: right;
}
div.caption-container {
float:right;
width: 270px;
height: 620px;
position:relative;
}
span.image-caption {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
z-index:10;
background:#fff;
}
div#thumbs {
padding: 0;
margin:0;
width:100%;
}
ul.thumbs {
padding: 0 0 0 0;
width:100%;
overflow:hidden;
position:relative;
}
ul.thumbs li {
float:left;
margin-right:20px;
width:140px;
}
ul.thumbs li.last {
margin:0;
}
ul.thumbs li span {
display:block;
font-size:15px;
line-height:1.2em;
color:#f9f9f9;
text-transform:uppercase;
font-weight:bold;
}
a.thumb {
display:block;
width:132px;
height:132px;
padding:3px;
background:#fff;
border:1px solid #e5e5e5
}
a.thumb:focus {
outline: none;
}
#controls {
width:100%;
}
div.pagination {
clear: both;
text-align:center;
position:relative;
z-index:10;
}
div.top.pagination {
display:none;
}
div.navigation div.bottom {
display:none;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
padding:0 4px;
font-weight:bold;
color:#fff;
}
div.pagination a:hover {
text-decoration: none;
color:#ffeaa8;
}
div.pagination span.current {
color:#ffeaa8;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
/* -- gallery end --*/
.list-1 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-1.gif) 0 12px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#7c7c7c;
}
.list-1 li a:hover {
color:#f00058;
text-decoration:underline;
}
.link:hover {
text-decoration:underline;
}
.link-1 {
display:inline-block;
line-height:27px;
padding-left:39px;
background:url(../images/marker-2.gif) 0 0px no-repeat;
}
.link-1:hover {
text-decoration:none;
}
.text-1 {
display:block;
color:#f00058;
}
.text-2 {
display:block;
color:#000;
font-style:normal !important;
}
dl span {
float:left;
width:98px;
font-weight:bold;
}
/*********************************Contact Form**********************************/
#contact-form {
display:block;
width:100%;
}
#contact-form label {
display:block;
height:40px;
overflow:hidden;
}
#contact-form input {
float:left;
width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px 6px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
outline:none;
}
#contact-form textarea {
float:left;
height:339px;
width:490px;
max-height:339px;
max-width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:30px;
width:75px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
.buttons {
padding:13px 10px 0 0;
text-align:right;
}
.buttons a {
margin-left:25px;
}
/*********************************Footer**********************************/
footer {
width:100%;
padding:10px 0 10px;
background:url(../images/footer-tail.gif) center top repeat-x;
}
.list-services {
padding:7px 6px 0 0px;
float:right;
}
.list-services li {
float:left;
padding:0 9px 0 0;
}
.list-services a {
display:block;
width:41px;
height:46px;
text-indent:-9999em;
background:url(../images/social-icons.png) 0 0 no-repeat;
}
.list-services .item-2 {
background-position:-50px 0;
}
.list-services .item-3 {
background-position:-100px 0;
}
.footer-text {
text-align:left;
padding:10px 0 0px;
}
.footer-text span {
display:block;
}

try this CSS
<style>
#select-choice-2-button {float:right;}
.ui-header .ui-title {margin-left: auto; margin-right: auto;}
</style>
try this html
<select name="forma" id="select-choice-2" data-native-menu="false" onchange="location = this.options[this.selectedIndex].value;">
<option value="">More</option>
<option value="http://">Help</option>
<option value="http://">Info</option>