Solved

Styling a sub-menu

Posted on 2014-03-08
4
224 Views
Last Modified: 2014-03-08
There is a menu bar at www.mauivacationrental.com  which has a submenu under the items "Suite" and "Cottage".  I would like to change the styling of those submenus, without changing the centering of the main menu bar, such that...

1. The submenus aren't centered, but appear close to their "parent" menu buttons; and
2. The color of the submenu buttons is aqua, but semi-transparent.

I am a beginner at CSS, and this is a little above my pay grade.
0
Comment
Question by:ddantes
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39915320
Website not working.
0
 

Author Comment

by:ddantes
ID: 39915348
I have been uploading files from time to time.  I don't know if that interfered with your checking -- if so, sorry.  It's working now.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39915364
From .p7dmm-sub-wrapper {} remove

   left: 0;
    top: 100%;
    width: 100%;


To .p7DMM01 ul ul a {} add

   background: aqua;
    opacity: .7;


and remove
    border-color: #FFFFFF;
0
 

Author Comment

by:ddantes
ID: 39915409
That did it!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question